<template>
  <div>
    <el-card style="height: 500px;margin-top: 5px;width: 1180px">
      <el-descriptions class="margin-top" title="简介" :column="2" border>
        <template slot="extra">
          <el-button @click="update_user()" type="primary" size="small">修改信息</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-picture-outline"></i>头像</template>
          <img class="img" :src="personal_information.icon" alt="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"></i>账户名</template>{{ personal_information.u_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-s-custom"></i>昵称</template>{{ personal_information.u_realname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-odometer"></i>年龄</template>{{personal_information.u_age }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-office-building"></i>职业</template>{{ personal_information.u_workplace }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-message"></i>邮箱Email</template>{{ personal_information.u_email }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-mobile-phone"></i>手机号码</template>{{ personal_information.u_phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-location-outline"></i>地区</template>{{ personal_information.u_area }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-location"></i>收货地址</template>{{ personal_information.u_address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-basketball"></i>兴趣爱好</template>{{ personal_information.u_interestsandhobbies }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-magic-stick"></i>个人寄语</template>
          <el-popover
              placement="top"
              width="200"
              trigger="click"
              :content="personal_information.u_message">
            <span slot="reference">{{ personal_information.u_message | truncate(10) }}</span>
          </el-popover>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-date"></i>注册日期</template>{{personal_information.u_redgt }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 修改信息对话框-->
    <el-dialog
        title="修改个人信息"
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="handleClose">
      <el-form :model="personal_information" :rules="rules" ref="personal_information" label-width="100px" >
        <div class="updateinfo">
          <div class="left">
            <el-form-item label="头像" prop="icon">
              <el-upload
                  class="avatar-uploader"
                  action=""
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="changePicture"
                  :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="昵称" prop="u_realname">
              <el-input v-model="personal_information.u_realname"></el-input>
            </el-form-item>
            <el-form-item label="职业" prop="u_workplace">
              <el-input v-model="personal_information.u_workplace"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="u_phone">
              <el-input v-model="personal_information.u_phone"></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="u_address">
              <el-input v-model="personal_information.u_address"></el-input>
            </el-form-item>
            <el-form-item label="个人寄语" prop="u_message">
              <el-input v-model="personal_information.u_message"></el-input>
            </el-form-item>
          </div>
          <div class="right">
            <el-form-item label="账号" prop="u_name">
              <el-input v-model="personal_information.u_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="u_age">
              <el-input v-model="personal_information.u_age"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="u_email">
              <el-input v-model="personal_information.u_email"></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="u_area">
              <el-input v-model="personal_information.u_area"></el-input>
            </el-form-item>
            <el-form-item label="兴趣爱好" prop="u_interestsandhobbies">
              <el-input v-model="personal_information.u_interestsandhobbies"></el-input>
            </el-form-item>
            <el-form-item label="注册时间" prop="u_redgt" >
              <el-input v-model="personal_information.u_redgt" disabled></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  name: "PersonalInformation",
  filters: {
    truncate(value, length) {
      if (!value) return '';
      return value.length > length ? value.slice(0, length) + '...' : value;
    }
  },
  data() {
    return {
      formData:new FormData(),
      dialogVisible: false,
      imageUrl: '',
      personal_information: {
        icon: "",
        u_name: "",
        u_pwd:"",
        ru_pwd:"",
        u_realname: "",
        u_age: "",
        u_workplace: "",
        u_email: "",
        u_phone: "",
        u_area: "",
        u_address: "",
        u_interestsandhobbies: "",
        u_message: "",
        u_redgt: "",
      },
      rules: {
        u_email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
        ],
        u_phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
        ],
      },
    }
  },
  created(){
    this.user_formData()
  },
  methods: {
    update_user() {
      this.dialogVisible = true
    },
    submit() {
      this.$refs.personal_information.validate(async (valid) => {
        if (valid) {
          this.personal_information.u_redgt = dayjs(this.personal_information.u_redgt).format('YYYY-MM-DD HH:mm:ss');
          for (let key in this.personal_information) {
            this.formData.append(key, this.personal_information[key]);
          }
          const {data: res} = await this.$axios.post("/user/addOrUpdate", this.formData);
          if (res.data) {
            this.$message.success("修改成功");
            this.dialogVisible = false;
            this.formData = new FormData();
          } else {
            this.$message.error("修改失败");
            return false;
          }
        }
      });
    },
    async user_formData() {
      const {data: res} = await this.$axios.get("/user/getUserById", {params: {u_id: sessionStorage.getItem("u_id")}})
        this.personal_information = res.data
        this.imageUrl = res.data.icon
        sessionStorage.setItem("icon", res.data.icon)
        sessionStorage.setItem("u_realname", res.data.u_realname)
        sessionStorage.setItem("u_name", res.data.u_name)
        this.personal_information.u_redgt = dayjs(res.data.u_redgt).format('YYYY-MM-DD HH:mm:ss');
    },
    changePicture(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (this.imageUrl){
        this.formData.append('file', file.raw);
      }
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt5M;
    },
    cancelDialog(){
      this.dialogVisible = false;
      this.$refs.personal_information.resetFields();
      this.user_formData();
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.dialogVisible = false;
            this.$refs.personal_information.clearValidate();
            this.user_formData();
            done();
          })
          .catch(_ => {});
    },
  },
};
</script>

<style scoped>
.img {
  width: 80px;
  height: 80px;
}
.updateinfo {
  height: 350px;
}
.left {
  float: left;
}
.right {
  overflow: hidden;
  width: 350px;
}
.avatar {
  width: 110px;
  height: 110px;
  display: block;
}
</style>
